<template>
  <div id="zhu" v-if="isRouterAlive">
    <div class="nav">
      <router-link to="/" tag="div">
        &lt;
      </router-link>
      <nav>
        专题
      </nav>
      <router-link to="" tag="div">
        ...
      </router-link>
    </div>
    <div class="cont" @scroll="qwe">
      <div class="aa">
        <img :src="ct.img_src" alt="">
      </div>
      <div class="lei">
        <router-link @click.native="isto" :to="'/zhuan/'+ct.ID" active-class="">专题</router-link>
        <router-link @click.native="isto" :to="'/zhuan/'+ct.ID+'/aa'" active-class="">话题</router-link>
      </div>
      <div class="view" @scroll="asd">
        <router-view id="view_t"></router-view>
      </div>
    </div>

    <footer class="zhuan_xia">
      <div class="zhuan_xia_one" v-show="isshow">
        <ul>
          <router-link to="" tag="li"><img src="/static/img/q_06.jpg" alt="">
            <span>收藏</span>
          </router-link>
          <router-link to="" tag="li"><img src="/static/img/q_28.jpg" alt="">
            <span>分享</span>
          </router-link>
        </ul>
        <div>
          <button>参与话题</button>
        </div>
      </div>
      <div v-show="!isshow" class="zhuan_xia_two">
        <div>
          <button>参与话题</button>
        </div>

      </div>
    </footer>
  </div>
</template>

<script>
import Scroll from "better-scroll";
export default {
  data: () => ({
    ct: "",
    zxc: "auto",
    isRouterAlive: true,
    isshow: true
  }),
  created() {
    // console.log(this.$route.params.id);
    let id = this.$route.params.id;
    this.$http
      .get("/api/menu/silderPage")
      .then(result => {
        // console.log(result.data);
        for (let i = 0; i < result.data.length; i++) {
          if (result.data[i].ID == id) {
            let aa = document.getElementsByClassName("view")[0];

            this.ct = result.data[i];
            this.ct.height = aa.clientHeight;
            // console.log(this.ct);
          }
        }
      })
      .catch(err => {
        console.log(err);
      });
  },

  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => (this.isRouterAlive = true));
    },
    qwe(el) {
      let aa = el.target;
      //   console.log(aa.offsetTop);
      //   console.log(aa.scrollTop);

      if (el.target.scrollTop > el.target.children[0].offsetHeight) {
        el.target.children[0].style.display = "none";
        el.target.children[2].style.overflow = "auto";
        this.zxc = "hidden";
      }
    },
    asd(el) {
      if (el.target.scrollTop <= 0) {
        el.target.parentNode.children[0].style.display = "block";
        // el.target.style.overflow = "hidden";
        // el.target.parentNode.style.overflow = "auto";
        this.zxc = "auto";
        this.reload();
      }
    },
    isto() {
      this.isshow = !this.isshow;
    }
  }
};
</script>

<style lang="scss">
#zhu {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  //   position: relative;
  .nav {
    width: 100%;
    height: 2.5rem;
    display: flex;
    background: #ff6767;
    align-items: center;
    flex-shrink: 0;
    color: white;
    > div {
      width: 2.5rem;
      font-size: 1rem;

      text-align: center;
      font-weight: bold;
      &:nth-child(1) {
        > img {
          width: 50%;
        }
      }
      &:nth-child(3) {
        > img {
          width: 30%;
        }
        > span {
          display: block;
          font-size: 12px;
        }
      }
    }
    > nav {
      // width: 100%;
      flex-grow: 1;
      height: 2.5rem;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }
  .cont {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    .aa {
      width: 100%;
      // flex-shrink: 0;
      > img {
        width: 100%;
      }
    }
    .lei {
      width: 100%;
      height: 2rem;
      flex-shrink: 0;
      display: flex;
      font-size: 0.8rem;
      justify-content: flex-start;
      // align-items: center;
      border-bottom: 1px solid #ccc;
      > a {
        display: block;
        flex-grow: 1;
        height: 100%;
        line-height: 2rem;
        text-align: center;
      }
    }
    .view {
      width: 100%;
      flex-grow: 1;
      // padding: 0.5rem;
      //   overflow: hidden;
      //   height: 100%;
      //   #view_t {
      //     height: 100%;
      //   }
    }
  }

  .zhuan_xia {
    width: 100%;
    flex-shrink: 0;

    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    .zhuan_xia_one {
      width: 100%;
      height: 2rem;
      display: flex;
      justify-content: space-around;
      > ul {
        flex-grow: 1;
        display: flex;
        justify-content: space-around;
        align-items: center;
        > li {
          width: 50%;
          text-align: center;
          > img {
            width: 15%;
            //   margin: 0 auto;
          }
          > span {
            display: block;
            font-size: 0.7rem;
            color: #8b8b8b;
          }
        }
      }
      > div {
        flex-grow: 1;
        line-height: 2rem;
        > button {
          width: 80%;
          height: 90%;
          color: white;
          background: #ff6767;
          border: none;
          outline: none;
          border-radius: 5px;
        }
      }
    }
    .zhuan_xia_two {
      width: 100%;
      height: 2rem;
      display: flex;
      justify-content: space-around;
      > div {
        flex-grow: 1;
        line-height: 2rem;
        text-align: center;
        > button {
          width: 80%;
          height: 90%;
          color: white;
          background: #ff6767;
          border: none;
          outline: none;
          border-radius: 5px;
        }
      }
    }
  }
}
</style>
